<template>
    <!--导航条组件-->
    <div>

        <nav class="ce_nav navbar navbar-default">
            <!--取消fluid流体布局，（非全屏使用container）-->
            <div class="container ce_nav_bar">
                <!-- Brand toggle 移动端显示下拉菜单
                 data-toggle ==> collapse：移动端折叠，手风琴显示
                 data-target ==> 对应折叠控制的导航条id
                 -->
                <div class="navbar-header">
                    <!--button为移动端点击按钮，点击实现collapse折叠面板-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <!--屏幕阅读器（针对特殊设备）：class="sr-only"-->
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--logo更改-->
                    <router-link class="navbar-brand" to="/">
                        <img v-if="siteSet.logo" class="logo" :src="siteSet.logo">
                        <!--<span>
                                <img class="logoFont" src="../../../public/base/imgs/img-800-450-BG-10-font.png">
                        </span>-->
                    </router-link>
                </div>

                <!-- 正常PC端显示nav，在xm平板时，隐藏nav -->
                <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav hidden-sm">
                        <li><a id="index" class="navLink" @click="inIndex">{{PAGE_TYPE.HOME.value}}</a>
                        </li>
                        <li><a id="company" class="navLink" @click="inCompany">{{PAGE_TYPE.COMPANY.value}}</a></li>
                        <li><a id="product" class="navLink" @click="inProduct">{{PAGE_TYPE.PRODUCT.value}}</a></li>
                        <li><a id="news" class="navLink" @click="inNews">{{PAGE_TYPE.NEWS.value}}</a></li>
                        <li><a id="materials" class="navLink" @click="inMaterials">{{PAGE_TYPE.MATERIALS.value}}</a></li>
                        <li><a id="connect" class="navLink" @click="inConnect">{{PAGE_TYPE.CONTACT.value}}</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="member" href="#" @click="openMemberCenter">会员中心</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <dialog-login ref="dialogLogin" :showDialog="showDialog"></dialog-login>
    </div>
</template>

<script>
    import DialogLogin from "../../components/DialogLogin";
    export default {
        name: "MainNav",
        components:{DialogLogin},
        data() {
            return {
                message: "导航条组件",
                siteSet:{},
                PAGE_TYPE:PAGE_TYPE,
                showDialog:'',
            }
        },
        mounted() {
            //监控路由
            let route = this.$route.path;
            if (route.indexOf("news")!==-1) {
                this.addNavClass("news");
            }else if(route.indexOf("index")!==-1){
                this.addNavClass("index");
            }else if(route.indexOf("product")!==-1){
                this.addNavClass("product");
            }else if(route.indexOf("company")!==-1){
                this.addNavClass("company");
            }else if(route.indexOf("connect")!==-1){
                this.addNavClass("connect");
            }else if(route.indexOf("materials")!==-1){
                this.addNavClass("materials");
            }else if(route.indexOf("member")!==-1){
                this.addNavClass("member");
            }
            //获取站点信息
            this.getSiteSetList();
        },
        watch: {},
        methods: {
            inNews() {
                this.removeNavClass();
                this.$router.push("/news/list");
            },
            inIndex() {
                this.removeNavClass();
                this.$router.push("/index");
            },
            inProduct(){
                this.removeNavClass();
                this.$router.push("/product/list");
            },
            inCompany(){
                this.removeNavClass();
                this.$router.push("/company/list");
            },
            inConnect(){
                this.removeNavClass();
                this.$router.push("/connect/list");
            },
            inMaterials(){
                this.removeNavClass();
                this.$router.push("/materials/list");
            },

            removeNavClass(){
                let navLink = document.getElementsByClassName("navLink");
                for (let i = 0; i < navLink.length; i++) {
                    Tool.removeClass(navLink[i], "active");
                }
            },
            addNavClass(addNav){
                let add = document.getElementById(addNav);
                Tool.addClass(add, "active");
            },
            getSiteSetList(){
                let loading=this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER+'/business/client/siteset/list').then((response)=>{
                    setTimeout(function () {
                        loading.close();
                    },300);
                    let resp=response.data;
                    if(resp.success){
                        this.siteSet=resp.responseData[0];
                    }
                });
            },
            openMemberCenter() {
                if(Tool.isNotEmpty(LocalStorage.get(MEMBER_LOGIN_LOCAL))){
                    this.$router.push("/member/list");
                }else{
                    //调用全局总线$event，打开模态框
                    this.$event.$emit('openLoginModal');
                    this.$message.error({
                        showClose: true,
                        message: '亲爱的亚盟家人，先登录',
                        center:true,
                    });
                }

            },
        }
    }
</script>

<style scoped>
    /*导航样式，不可直接更改nav高度，否则响应式手机端会bug，需要子元素brand撑开
    1.brand默认padding：15px，行高为height-上下padding 80-30
    2.修改导航项样式
    */
    .ce_nav {
        margin-bottom: 35px; /*.navbar设置了底部间隔20px，基于固定位置，这里设置偏移*/
        background-color: #fafafa;
    }
    .ce_nav .ce_nav_bar{
        position: fixed;
        z-index: 999;
        background-color: rgba(250,250,250,.9);
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    }

    /*更改移动端高度设置*/
    .ce_nav .navbar-toggle {
        margin-top: 23px;
    }

    .ce_nav .navbar-brand {
        height: 80px;
        line-height: 55px;
        padding-bottom: 10px;
        display: block;
    }
    .ce_nav .navbar-brand:hover,.ce_nav .navbar-brand:focus{
        border-bottom: 0;
    }

    .ce_nav .navbar-brand .logo {
        height: 50px;
        float: left;
        margin-right: 8px;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .ce_nav .navbar-brand .logoFont {
        height: 30px;
    }

    .navbar-nav li a {
        line-height: 50px;
        font-size: 16px;
        cursor: pointer;
    }

    .navbar-nav li a:hover, a:focus {
        color: #1d7dd6; /*默认#777*/
        border-bottom: 5px solid #e92322;
    }

    .navbar-nav .active a, a:hover, a:focus {
        background-color: transparent; /*透明背景色*/
        border-bottom: 5px solid #e92322;
    }

    .navbar-right {
        margin-right: 20px;
    }

    /*active*/
    .active {
        background-color: transparent;
        border-bottom: 5px solid #e92322;
    }

</style>